<script setup>
import LfDropdownPanel from '@/components/commonUI/LfDropdownPanel.vue'
import FollowButton from '@/components/FollowButton.vue'
import UserAvatar from '@/components/UserAvatar/UserAvatar.vue'
import MoreIcon from '@/components/svgComponents/MoreIcon.vue'
import LfButton from '@/components/commonUI/LfButton.vue'
import { Document, UserFilled } from '@element-plus/icons-vue'
import {
  fetchTopicMemberDel,
  fetchTopicMemberBlacklist,
  fetchTopicMemberSetAdmin,
  fetchTopicMemberOutBlacklist,
  fetchTopicMemberCancelAdmin,
  fetchTopicTransfer,
} from '@/axios/api/topic'
import { useRoute } from 'vue-router'
import {
  useTopicMemberQuery,
  useTopicMemberBlacklistListQuery,
  useTopicDataQuery,
} from '@/composables/useTopicDataQuery'
const route = useRoute()

const props = defineProps({
  type: {
    type: String,
    default: 'user',
  },
  item: {
    type: Object,
    required: true,
  },
})

const { refetch } = useTopicMemberQuery(route.params.topicId)
const { refetch: refetchBlacklistList } = useTopicMemberBlacklistListQuery(route.params.topicId)
const { refetch: refetchTopicDetail } = useTopicDataQuery(route.params.topicId)

const handleDel = () => {
  fetchTopicMemberDel({
    topicId: route.params.topicId,
    id: props.item.uid,
  }).then(() => {
    refetch()
  })
}

const handleBlacklist = () => {
  fetchTopicMemberBlacklist({
    topicId: route.params.topicId,
    uid: props.item.uid,
  }).then(() => {
    refetch()
    refetchBlacklistList()
  })
}

const handleSetAdmin = () => {
  fetchTopicMemberSetAdmin({
    topicId: route.params.topicId,
    uid: props.item.uid,
  }).then(() => {
    refetchTopicDetail()
  })
}

const handleOutBlacklist = () => {
  fetchTopicMemberOutBlacklist({
    topicId: route.params.topicId,
    uid: props.item.uid,
  }).then(() => {
    refetchBlacklistList()
  })
}

const handleCancelAdmin = () => {
  fetchTopicMemberCancelAdmin({
    topicId: route.params.topicId,
    uid: props.item.uid,
  }).then(() => {
    refetchTopicDetail()
  })
}

const handleTransfer = async () => {
  await fetchTopicTransfer({
    topicId: route.params.topicId,
    uid: props.item.uid,
  })
}
</script>

<template>
  <div class="fans-list-item flex items-center w-full max-w-full bg-white rounded-xl shadow-sm hover:shadow-lg transition p-4 mb-2 border border-gray-100 ">
    <UserAvatar :avatar="item.avatar" :userId="item.uid" size="60" :noDropdown="type === 'hot'" class=" flex-shrink-0" />
    <div class="flex flex-col justify-between flex-1 min-w-0 ml-4">
      <div class="flex items-center justify-between w-full min-w-0">
        <span class="font-bold text-base text-blue-900 truncate max-w-[140px]">{{ item.username }}</span>
        <FollowButton v-if="type === 'user' || type === 'hot'" :isFollow="!!item.hasFollow" :id="item.uid" class="ml-2 flex-shrink-0" />
      </div>
      <div v-if="type === 'hot'" class="flex gap-4 text-[14px] text-slate-600 font-medium mt-1">
        <span class="flex items-center gap-1"><el-icon class="text-blue-400"><Document /></el-icon>{{ item.postNum }} 帖子</span>
        <span class="flex items-center gap-1"><el-icon class="text-orange-400"><UserFilled /></el-icon>{{ item.fans }} 粉丝</span>
      </div>
      <div v-else class="text-[14px] text-slate-500 truncate max-w-[200px] mt-1">{{ item.intro }}</div>
      <div class="flex gap-2 mt-2 flex-wrap">
        <LfButton v-if="type === 'blacklist'" type="primary" @click="handleOutBlacklist" size="small">移出黑名单</LfButton>
        <LfButton v-if="type === 'admin'" type="primary" @click="handleCancelAdmin" size="small">取消管理员</LfButton>
        <LfDropdownPanel v-if="type === 'topicUserManage'" position="bottom-left">
          <LfButton size="small" type="secondary" class="flex items-center"><MoreIcon /></LfButton>
          <template #content>
            <div class="flex flex-col gap-[10px] w-[130px] p-3 bg-[--fill-0] rounded-md shadow-lg">
              <div @click="handleDel">踢出主题</div>
              <div @click="handleBlacklist">拉黑该用户</div>
              <div @click="handleSetAdmin">设为管理员</div>
              <div @click="handleTransfer">转让主题版主</div>
            </div>
          </template>
        </LfDropdownPanel>
      </div>
    </div>
  </div>
</template>

<style scoped>
.fans-list-item {
  transition: box-shadow 0.2s, border 0.2s, background 0.2s;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  /* overflow: hidden; */
}
.fans-list-item:hover {
  background: #fafdff;
  border-color: #a3c8fa;
  box-shadow: 0 6px 24px 0 rgba(56, 112, 255, 0.13);
}
</style>
